<!--添加路由模态框-->
<template>
  <Modal v-model="routeAddModalVisible">
    <template #header>
      <div>
        <span style="font-size: 16px;font-weight: bold">创建菜单</span>
      </div>
    </template>
    <div style="padding: 8px 16px">
      <Form :model="routeForm" :rules="routeFormValidate" ref="formRef">
        <FormItem label="菜单标识" prop="name">
          <Input v-model="routeForm.name" placeholder="请输入菜单名称"></Input>
        </FormItem>
        <FormItem label="菜单路径">
          <Input v-model="routeForm.path" :disabled="true"></Input>
        </FormItem>
        <FormItem label="菜单类型">
          <RadioGroup v-model="permissonType">
            <Radio label="catalog">目录</Radio>
            <Radio label="menu">菜单</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="组件路径" prop="componentPath" v-if="permissonType==='menu'">
          <!--          <Input v-model="routeForm.componentPath" placeholder="请输入组件的绝对路径"></Input>-->
          <Input v-model="routeForm.componentPath" placeholder="请输入组件的绝对路径">
            <template #prepend>
              <span>@/</span>
            </template>
          </Input>
        </FormItem>
        <FormItem label="标题名称" prop="meta.title">
          <Input v-model="routeForm.meta.title" placeholder="请输入标题名称"></Input>
        </FormItem>
        <FormItem label="是否隐藏">
          <RadioGroup v-model="routeForm.meta.hideInMenu">
            <Radio label="1">是</Radio>
            <Radio label="0">否</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="图标">
          <Input v-model="routeForm.meta.icon" placeholder="请输入图标"></Input>
        </FormItem>
      </Form>
    </div>
    <template #footer>
      <Button type="default" @click="routeAddModalVisible=false">取消</Button>
      <Button type="primary" @click="createRoute">确定</Button>
    </template>
  </Modal>

</template>
<script setup>
import {usePermissionStore} from "@/module-base/stores/permissionStore.js";
import {storeToRefs} from "pinia";
import {ref, watchEffect} from "vue";
import {createRoute as createRouteApi} from '@module-base/api/sysManage.js'

const permissionStore = usePermissionStore();
const {routeAddModalVisible, routeForm} = storeToRefs(permissionStore)

const emit = defineEmits(['get-route-list'])
const formRef=ref(null)
async function createRoute() {
  const validRs=await formRef.value.validate()
  if(!validRs) return
  const createRs = await createRouteApi(routeForm.value)
  console.log(createRs)
  if (createRs.success) {
    routeAddModalVisible.value=false
    emit('get-route-list')
  }
}

const routeFormValidate = ref({
  name: [{
    type: 'string',
    required: true,
    validator: (rule, value, callback) => {
      // 必填校验
      if (!value?.trim()) {
        return new Error('请输入菜单名称')
      }
      // 英文格式校验
      if (!/^[A-Za-z][A-Za-z0-9_-]*$/.test(value)) {
        return new Error('路由必须以英文字母开头，且只包含英文、下划线、中划线。')
      }
      callback()
    },
  }],
  componentPath: [{
    type: 'string',
    required: true,
    validator: (rule, value, callback) => {
      // 必填校验
      if (!value?.trim()) {
        return new Error('请输入组件路径')
      }
      // 英文格式校验
      if (/[\u4e00-\u9fff]/.test(value)) {
        return new Error('路由名称只能是英文')
      }
      callback()
    },
  }],
  'meta.title': {
    required: true,
    message: '标题不能为空',
    trigger: 'blur'
  }
})
// 选择菜单类型
const permissonType=ref('menu')

watchEffect(() => {
  routeForm.value.path = routeForm.value.name?.trim()
      ? `/${routeForm.value.name.trim()}`
      : '';
});
</script>
<style scoped>

</style>